// createApp 创建一个实例对象app
// app.direactive('指令名称',{ mounted(){} })

// 问题：生成俩个app实例对象 互相独立
// 解决问题：插件

// 引入监听图片懒加载的方法
import { useIntersectionObserver } from '@vueuse/core'
import defaltImg from '@/assets/images/200.png'
const pulign = {
  install (app) {
    // 定义全局指令
    app.directive('img-lazy', {
      mounted (el, binding) {
        // console.log(el)
        // el:img dom对象
        // binding.value  图片url地址
        // 使用vueuse/core提供的监听api 对图片dom进行监听 正式进入视口才加载
        // img.src = url
        const { stop } = useIntersectionObserver(
        // 懒加载的逻辑：监听当前的img dom对象是否进入到视口区域  如果进入 就把图片的地址交给img 的src属性
        // 一旦src有了值就会自动发送http请求 获取图片资源
          // 监听目标元素
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting: 当前监听的元素是否成功进入到视口区域 如果进来了就是true 否则就是false
            // observerElement 被观察的dom
            // console.log(isIntersecting)
            // 有了一个判断是否进入视口区域的条件 如果是true  代表进入了视口区域 发起请求
            if (isIntersecting) {
              // 当图片url无效加载失败的时候使用默认图片替代
              el.onerror = function () {
                el.src = defaltImg
              }
              // 给img的src赋值
              el.src = binding.value
              // 发送请求之后  立刻停止监听
              stop()
            }
            // 监听处理不是只一次进行的 每次进入移除视口都会再次执行回调  所以需要手动关闭
          },
          // 进入可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
          { threshold: 0 }
        )
      }
    })
  }
}

export default pulign
